<template>
  <h2>演示reactive的响应式数据</h2>
  <p>用户的姓名是:{{ user.name }}</p>
  <p>用户的年龄是:{{ user.age }}</p>
  <p>源对象是:{{ obj }}</p>
  <p>代理对象是:{{ user }}</p>
  <p>车的品牌是:{{ user.car.brand }}</p>
  <p>车的价格是:{{ user.car.price }}</p>
  <button @click="user.name += '@'">修改用户名</button>
  <!-- <button @click="user.age++">修改年龄</button> -->
  <button @click="changeAge">修改年龄</button>
  <button @click="user.car.price++">修改车的价格</button>
  <hr />
  <p>使用reactive处理的count：{{ count }}</p>
  <button @click="changeCount">修改数据</button>
</template>

<script>
import { reactive, ref } from "vue";
export default {
  name: "HelloWorld",
  setup() {
    const obj = {
      name: "jack",
      age: 20,
      car: {
        brand: "比亚迪",
        price: 160000,
      },
    };

    // let count = reactive(100); // reative不能将简单数据类型转换成响应式
    let count = ref(100);

    // const user = reactive(obj)
    const user = ref(obj);

    function changeCount() {
      console.log(count);
      count.value = 200;
      console.log(count);
    }

    function changeAge() {
      // 对于reactive实现的响应式数据，直接修改即可，不再需要value属性
      // 因为此时是一个Proxy对象 不是ref对象
      // user.age += 2
      // 由于当前的对象是使用ref来改造的，是将原值放在了ref对象中的value属性中
      user.value.age += 2;
      console.log("源对象", obj);
      console.log("响应式对象", user);
    }
    return {
      obj, // 源对象
      user, // 代理对象
      changeAge,
      count,
      changeCount,
    };

    // V3当中对于复杂数据类型，是使用Proxy来实现的响应式
    // 两者的异同
    //1. ref可以将简单数据类型转换成响应式 而reactive不可以
    //2. ref可以将复杂数据类型转换成响应式数据 但是内部底层其实还是调用的reactive函数来将源数据转换成代理形式的响应式数据 相当于绕了一大圈
  },
};
</script>

<style>
</style>